<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="设置昵称" />
    </template>
    <view class="content">
      <view class="flex flex-a flex-bt">
        <view class="flex flex-a f1">
          <input
            v-model="nickName"
            placeholder="请输入昵称"
            :focus="true"
            placeholder-class="input-placeholder"
            @confirm="onSave"
            class="input"
            maxlength="8"
          />
        </view>
      </view>
      <view class="btns">
        <view @click="onSave" class="active-btn">保存</view>
      </view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getLocalUserInfo } from "../../../assets/utils/index";
import { updateProfile } from "../../../api/setting/index";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      avatar: "",
      nickName: "",
      userinfo: {},
    };
  },
  onShow() {
    this.avatar = getLocalUserInfo().avatar;
    this.nickName = getLocalUserInfo().nickName;
    this.userinfo = getLocalUserInfo();
  },
  methods: {
    onSave() {
      if (!this.nickName) {
        return uni.showToast({
          title: "请输入昵称",
          icon: "none",
          mask: true,
        });
      }
      updateProfile({
        nickName: this.nickName,
        avatar: this.avatar,
      }).then((res) => {
        uni.showToast({
          title: "修改成功",
          icon: "none",
          mask: true,
        });
        this.userinfo.nickName = this.nickName;
        uni.setStorageSync("userInfo", JSON.stringify(this.userinfo));
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  min-height: 100%;
  background: #f7f8ff;
  padding: 32rpx;
  .input {
    width: 100%;
    height: 112rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 0 32rpx;
  }
  .btns{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    padding: 32rpx 48rpx;
    border-top: 2rpx solid #E9E9EA;
    .active-btn{
      height: 88rpx;
    }
  }
}
</style>
